<template>
  <div class="publish-blog-wrapper">
    <Input v-model="title" maxlength="40" show-word-limit placeholder="请输入标题(建议30字以内)" />
    <Divider />
    <editor :value="content" @on-change="setContent"></editor>
    <Divider />
    <span>请选择帖子分类</span>
    <RadioGroup v-model="zone">
      <Radio
        v-for="zoneItem in zoneList"
        :key="zoneItem.id"
        :label="zoneItem.id"
        style="margin-top: 10px"
        border
      >{{zoneItem.title}}</Radio>
    </RadioGroup>
    <span class="sub-text">
      <Icon type="md-alert" />若不选择分类，则默认发布至
      品茶交流圈
    </span>
    <Divider />
    <span>请设置帖子封面</span>

    <Upload
      type="drag"
      ref="upload"
      :action="'/api/blog/' + getCid"
      :show-upload-list="false"
      :format="['jpg','jpeg','png']"
      :max-size="2048"
      :on-success="handleSuccess"
      :on-format-error="handleFormatError"
      :on-exceeded-size="handleMaxSize"
      style="width: 30%;margin:10px 0"
    >
      <div style="padding: 20px 0" v-if="!cover">
        <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
        <p>点击或拖拽上传一张图片</p>
      </div>
      <div style="padding: 20px 0" v-else>
        <div v-if="this.$route.query.type=='blog_edit'">
          <img :src="cover" style="width: 300px" />
        </div>
        <div v-else>
          <Icon type="ios-checkmark-circle-outline" size="52" style="color: #2ecc71"></Icon>
          <p>{{this.$refs.upload.fileList[0].name}}</p>
        </div>
      </div>
    </Upload>
    <Divider />
    <Button
      type="primary"
      @click="handleSubmit"
      :loading="loading"
    >{{this.$route.query.type == 'blog_edit' ?'保存':'发布'}}</Button>
    <Button type="primary" @click="handleReset" style="margin-left: 10px" ghost>重置</Button>
  </div>
</template>

<script>
import { getBasicInfo } from "../../utils/mixin";
import editor from "../../components/Editor";

export default {
  components: {
    editor
  },
  mixins: [getBasicInfo],
  data() {
    return {
      title: "",
      content: "",
      cover: "",
      zone: 1,
      zoneList: [],
      loading: false
    };
  },
  mounted() {
    this.axios
      .get("/api/zone")
      .then(zoneRes => {
        this.zoneList = zoneRes.data;
      })
      .catch(err =>
        this.$Notice.error({ title: "交流圈获取失败", desc: error })
      );
    if (this.$route.query.type == "blog_edit")
      this.axios
        .get(`/api/blog?type=detail&blog_id=${this.$route.query.blog_id}`)
        .then(res => {
          let blog = res.data;
          this.title = blog.title;
          this.content = blog.content;
          this.cover = blog.cover;
          this.zone = blog.zone_id;
        });
  },
  methods: {
    setContent(content) {
      this.content = content;
    },
    handleSubmit() {
      this.loading = true;
      if (this.$route.query.type == "blog_edit")
        this.axios
          .post("/api/blog", {
            id: this.$route.query.blog_id,
            title: this.title,
            cover: this.cover,
            content: this.content
          })
          .then(res => {
            this.$Notice.success({
              title: "保存成功"
            });
            this.$router.back();
          })
          .catch(error =>
            this.$Notice.error({
              title: "保存失败",
              desc: error
            })
          );
      else
        this.axios
          .post("/api/blog", {
            cid: this.getCid,
            zid: this.zone,
            title: this.title,
            cover: this.cover,
            content: this.content
          })
          .then(res => {
            this.$Notice.success({
              title: "发布成功"
            });
            this.loading = false;
            this.handleReset();
          })
          .catch(error =>
            this.$Notice.error({
              title: "发布失败",
              desc: error
            })
          );
    },
    handleReset() {
      this.title = "";
      this.content = "";
      this.cover = "";
      this.zone = 1;
    },
    handleSuccess(res, file) {
      this.cover = res;
    },
    handleFormatError(file) {
      this.$Notice.warning({
        title: "文件格式错误",
        desc: "文件 " + file.name + " 格式不正确，请选择jpg或png格式的文件"
      });
    },
    handleMaxSize(file) {
      this.$Notice.warning({
        title: "文件过大",
        desc: "文件  " + file.name + " 过大。请上传2M以下的图片"
      });
    }
  }
};
</script>
